<template>
  <div class="test-item" v-if="testItem.questionsType !== 'partition'">
    <div class="test-title" :id="'child' + testIndex"
         v-if="testItem.questionsType !== 'remark' && !(testItem.questionsType === 'input' && testItem.optionsContent)">
      <span
          :class="[ 'test-num', testItem.isMustAnswer === '1' || isMustAnswer ? 'mustAnswer' : '' ]">{{ index + '. ' }}</span>
      <span class="test-title-content"
            v-html="testItem.content + (testItem.questionsType === 'vote' ? '（最多可选' + testItem.maxChooseNum + '项）' : '')"></span>
      <span class="fill-notice" v-if="testItem.fillVali && !testItem.extend">此题未作答</span>
      <span class="fill-notice" v-else-if="testItem.fillVali && testItem.questionsType === 'radio'">附加题未作答</span>
      <span class="fill-notice" v-else-if="testItem.fillVali">补充回答未填写</span>
    </div>
    <div class="test-title" :id="'child' + testIndex"
         v-else-if="testItem.questionsType === 'input' && testItem.optionsContent">
      <span
          :class="[ 'test-num', testItem.isMustAnswer === '1' || isMustAnswer ? 'mustAnswer' : '' ]">{{ index + '. ' }}</span>
      <span class="test-title-content rich-text">
                <template v-for="(item, i) in testContent">
                    <span v-if="typeof item !== 'number'">{{ item }}</span>
                    <span class="underline-text" v-else-if="edit && value[item]">{{ value[item] }}</span>
                    <van-field
                        class="underline-input"
                        v-model.trim="value[item]"
                        :disabled="edit"
                        :placeholder="''"
                        v-else/>
                </template>
            </span>
      <span class="fill-notice" v-if="testItem.fillVali && !testItem.extend">此题未作答</span>
      <span class="fill-notice" v-else-if="testItem.fillVali">补充回答未填写</span>
    </div>
    <div class="test-title" :id="'child' + testIndex" v-else>
      <span class="test-title-content fs-14 fc-999">{{ testItem.content }}</span>
    </div>
    <Media-Preview class="mb10" v-if="testItem.fileHttpUrl || testItem.fileUrl" :fileStorage="testItem.fileStorage"
                   :fileUrl="testItem.fileHttpUrl" :fileName="testItem.fileName" :type="transType(testItem.fileType)"
                   :guid="guid()"></Media-Preview>
    <div class="test-content" v-if="testItem.questionsType === 'radio'">
      <van-radio-group
          v-model="value"
          :disabled="edit">
        <div class="van-form-wrap"
             v-for="(item,index) in testItem.optionsContent"
             :key="index">
          <van-radio
              :name="item.optionsId">{{ double(index + 1) + '. ' + item.content }}
          </van-radio>
          <Media-Preview v-if="item.fileHttpUrl || item.fileUrl" :fileStorage="item.fileStorage"
                         :fileUrl="item.fileHttpUrl" :fileName="item.fileName" :type="transType(item.fileType)"
                         :guid="guid()"></Media-Preview>
          <div class="test-content test-content-extend mt10"
               v-if="value === item.optionsId && item.openExtendQuestion == 1">
            <div class="extend-wrap">附加问题：{{ item.extendQuestionContent }}</div>
            <div class="test-content-item flex-wrap flex-middle">
              <span class="test-content-num"></span>
              <van-field
                  class="van-textarea"
                  v-model="extendAsw"
                  :disabled="edit"
                  rows="2"
                  autosize
                  maxlength="800"
                  type="textarea"
                  :placeholder="edit ? '' : '请输入'"/>
            </div>
          </div>
        </div>
      </van-radio-group>
    </div>
    <div class="test-content" v-else-if="testItem.questionsType === 'check'">
      <van-checkbox-group
          v-model="value"
          :disabled="edit">
        <div class="van-form-wrap"
             v-for="(item,index) in testItem.optionsContent"
             :key="index">
          <van-checkbox
              icon-size="20px"
              shape="square"
              :name="item.optionsId">{{ double(index + 1) + '. ' + item.content }}
          </van-checkbox>
          <Media-Preview v-if="item.fileHttpUrl || item.fileUrl" :fileStorage="item.fileStorage"
                         :fileUrl="item.fileHttpUrl" :fileName="item.fileName" :type="transType(item.fileType)"
                         :guid="guid()"></Media-Preview>
          <div class="test-content test-content-custom"
               v-if="value.indexOf(item.optionsId) >= 0 && item.openCustomAnswer == 1">
            <div class="test-content-item flex-wrap flex-middle">
              <span class="test-content-num"></span>
              <van-field
                  v-model.trim="customAsw"
                  :disabled="edit"
                  :placeholder="edit ? '' : '请输入'"/>
            </div>
          </div>
        </div>
      </van-checkbox-group>
    </div>
    <div class="test-content" v-else-if="testItem.questionsType === 'select'">
      <uni-data-picker
          class="van-textarea"
          placeholder="请选择"
          :localdata="testItem.optionsContent"
          :map="cascaderProps"
          :clear-icon="false"
          v-model="value"
          @change="onFinish"
          :readonly="edit"
          :border="false">
      </uni-data-picker>
    </div>
    <div class="test-content" v-else-if="testItem.questionsType === 'vote'">
      <div class="vote-list" :class="{ disabled: edit }">
        <div
            class="vote-item-wrap"
            v-for="(item,index) in testItem.optionsContent"
            :key="index">
          <div class="vote-item flex-wrap flex-middle"
               :class="{active: getActive(item.optionsId)}" @click="selectVote(item.optionsId)">
            <div class="vote-content">{{ double(index + 1) + '. ' + item.content }}</div>
            <div class="vote-num">{{ item.chooseCount }}人</div>
            <div class="vote-progress" :style="'width: ' + item.chooseCount/totalCount*100 + '%'"></div>
          </div>
          <button
              size="small"
              type="primary"
              @click="openLink(item.linkAddr)"
              v-if="item.openLink == 1 && item.linkAddr">点击查看
          </button>
          <Media-Preview v-if="item.fileHttpUrl || item.fileUrl" :fileStorage="item.fileStorage"
                         :fileUrl="item.fileHttpUrl" :fileName="item.fileName" :type="transType(item.fileType)"
                         :guid="guid()"></Media-Preview>
        </div>
      </div>
    </div>
    <div class="test-content" v-else-if="testItem.questionsType === 'input' && !testItem.optionsContent">
      <div class="test-content-item flex-wrap flex-middle">
        <span class="test-content-num"></span>
        <van-field
            class="van-textarea"
            v-model="value[0]"
            :disabled="edit"
            rows="2"
            autosize
            maxlength="800"
            type="textarea"
            :placeholder="testName"/>
      </div>
    </div>
    <div class="test-content" v-else-if="testItem.questionsType === 'textarea'">
      <div class="test-content-item flex-wrap flex-middle">
        <span class="test-content-num"></span>
        <van-field
            class="van-textarea"
            v-model="value"
            :disabled="edit"
            rows="2"
            autosize
            maxlength="800"
            type="textarea"
            :placeholder="testName"/>
      </div>
    </div>
    <div class="test-content" v-else-if="testItem.questionsType === 'inputs'">
      <div class="test-content-item" v-for="(item, index) in testItem.optionsContent">
        <div class="flex-wrap flex-text-mid">
          <span class="test-content-num"></span>
          <span class="fcolor-333 fs-16">{{ item.content }}</span>
        </div>
        <div class="flex-wrap flex-middle mt5">
          <span class="test-content-num"></span>
          <van-field
              class="flex-item van-textarea"
              :disabled="edit"
              v-model="value[index]"
              :placeholder="testName"></van-field>
        </div>
        <Media-Preview v-if="item.fileHttpUrl || item.fileUrl" :fileStorage="item.fileStorage"
                       :fileUrl="item.fileHttpUrl" :fileName="item.fileName" :type="transType(item.fileType)"
                       :guid="guid()"></Media-Preview>
      </div>
    </div>
    <div class="test-content" v-else-if="testItem.questionsType === 'mark'">
      <div class="test-content-item">
        <div class="flex-wrap">
          <span class="test-content-num"></span>
          <rate :rateText="testItem.remark"
                :mark="value"
                :disabled="edit"
                @updata="updata"></rate>
        </div>
      </div>
    </div>
    <div class="test-content" v-else-if="testItem.questionsType === 'star'">
      <div class="test-content-item">
        <div class="flex-wrap">
          <span class="test-content-num"></span>
          <rate
              type="star"
              :mark="value"
              :disabled="edit"
              :rateText="testItem.remark"
              @updata="updata"></rate>
        </div>
      </div>
    </div>
  </div>
  <div class="test-item partition" v-else>
    <div class="title">{{ testItem.content }}</div>
  </div>
</template>
<script>
import rate from './rate.vue'
import MediaPreview from '@/components/common/MediaPreview'
import {guid} from '@/assets/js/util'
import VanField from "@/components/vant/van-field/van-field.vue";
import VanRadioGroup from "@/components/vant/van-radio-group/van-radio-group.vue";
import VanRadio from "@/components/vant/van-radio/van-radio.vue";
import VanCheckboxGroup from "@/components/vant/van-checkbox-group/van-checkbox-group.vue";
import VanCheckbox from "@/components/vant/van-checkbox/van-checkbox.vue";

export default {
  data() {
    return {
      indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
      colors: ['#99A9BF', '#F7BA2A', '#25A3AF'],
      cascaderProps: {
        value: 'optionsId',
        text: 'content'
      },
      customAsw: this.customAnswer || '',
      extendAsw: this.extendAnswer || '',
      value: this.val || '',
      text: '',
      selectShow: false
    }
  },
  props: {
    testItem: {
      type: Object,
      default: () => {
        return {
          type: 0
        }
      }
    },
    optionsList: {
      type: Array,
      default: () => []
    },
    testName: {
      type: String,
      default: '请输入'
    },
    showIndex: {
      type: Number,
      default: 0
    },
    testIndex: {
      type: Number,
      default: 0
    },
    isMustAnswer: {
      type: Boolean,
      default: false
    },
    edit: {
      type: Boolean,
      default: false
    },
    customAnswer: {
      type: String,
      default: ''
    },
    extendAnswer: {
      type: String,
      default: ''
    },
    val: [String, Number, Array, Boolean, Object]
  },
  mounted() {
  },
  components: {
    VanCheckbox,
    VanCheckboxGroup,
    VanRadio,
    VanRadioGroup,
    VanField,
    rate,
    MediaPreview
  },
  computed: {
    index() {
      return this.double(this.showIndex + 1)
    },
    testContent() {
      let arr = this.testItem.content.split(/\[\[\*\]\]/)
      let len = arr.length
      for (let i = len - 1; i > 0; i--) {
        arr.splice(i, 0, i - 1)
      }
      return arr
    },
    totalCount() {
      let num = 0
      this.testItem.optionsContent.map(e => {
        num += e.chooseCount || 0
      })
      return num
    }
  },
  methods: {
    getActive(id) {
      return this.value && !!this.value.find(e => e === id)
    },
    selectVote(id) {
      let arr = this.value || []
      let index = arr.indexOf(id)
      if (this.edit) {
        return false
      }
      if (index >= 0) {
        arr.splice(index, 1)
      } else if (arr.length < this.testItem.maxChooseNum) {
        arr.push(id)
      } else if (arr.length >= this.testItem.maxChooseNum) {
        this.$toast.warning('当前投票最多选择' + this.testItem.maxChooseNum + '项')
      }
      this.value = arr
    },
    transType(type) {
      let ob = {1: 'V', 2: 'A', 3: 'M', V: 'V', A: 'A', M: 'M'}
      return ob[type] || ''
    },
    guid() {
      return guid()
    },
    double(i) {
      return i > 9 ? i : ('0' + i)
    },
    updata(n) {
      this.$emit('input', this.testItem.questionsType, this.testItem.questionsId, n)
    },
    onFinish(e) {
      let selectedOptions = e.detail.value
      this.selectShow = false
      console.log(e.detail.value)
      this.value = selectedOptions[0].value
      this.text = selectedOptions[0].text
      //this.Value = selectedOptions.map((option) => option.text).join('/');
    },
    openLink(url) {
      this.$emit('openLink', url)
    }
  },
  watch: {
    val(n) {
      if (n === '[]') {
        this.value = []
      } else {
        this.value = n
      }
    },
    value(n) {
      this.$emit('input', this.testItem.questionsType, this.testItem.questionsId, n)
    },
    extendAnswer(n) {
      this.extendAsw = n
    },
    extendAsw(n) {
      this.$emit('input', this.testItem.questionsType, this.testItem.questionsId, n, 'extendAnswer')
    },
    customAnswer(n) {
      this.customAsw = n
    },
    customAsw(n) {
      this.$emit('input', this.testItem.questionsType, this.testItem.questionsId, n, 'customAnswer')
    },
  }
}
</script>
<style lang="scss" scoped>
.test-item {
  padding-bottom: 20px;

  &.partition {
    padding: 10px 0;

    .title {
      font-size: 18px;
      font-weight: bold;
    }
  }

  &.show-answer {
    padding-bottom: 15px;
  }

  &.show-answer:last-child {
    padding-bottom: 25px;
  }
}

.van-form-wrap + .van-form-wrap {
  margin-top: 10px;
}

.test-content-extend {
  padding: 10px;
  background: #F5F5F5;
}

.test-content-custom {
  border-bottom: 1px solid #333;

  .el-textarea {
    :deep(.el-textarea__inner) {
      border: none;
    }
  }
}

.extend-wrap {
  color: #333;
  font-size: 14px;
  padding: 10px 0 10px;

  &:before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
}

.test-title {
  color: #000;
  font-size: 16px;
  padding: 15px 0;
  line-height: 28px;
  font-weight: bold;
  word-break: break-all;

  .test-num {
    cursor: pointer;
    width: 38px;

    &.mustAnswer {
      &:before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }
    }
  }

  .fill-notice {
    display: inline-block;
    width: 94px;
    height: 28px;
    color: #fff;
    font-size: 12px;
    background: #D0021B;
    border-radius: 2px;
    text-align: center;
    margin-left: 12px;
    vertical-align: bottom;
  }

  .test-title-content {
    :deep(p) {
      display: inline;
    }

    :deep(br) {
      display: none;
    }
  }
}

.red {
  color: #DF0000;
}

.test-answer {
  padding: 10px 0;
  color: #333;
  margin-top: 15px;

  & + .test-answer {
    margin-top: 0;
    padding-top: 0;
  }
}

.test-answer.green {
  color: var(--color);
}

.test-answer.red {
  color: #D0021B;
}

.test-btn {
  padding: 25px 0 0;

  .btn {
    width: 120px;
    height: 40px;
    background: var(--color);
    border-radius: 20px;
  }
}

.van-radio-group {
  .van-radio {
    background: #FAFAFA;
    border-radius: 4px;
    border: 1px solid #EEEEEE;
    line-height: 18px;
    padding: 16px 15px;
    display: block;

    &[aria-checked=true], &.right {
      background: var(--colorbg);
      border: 1px solid var(--color);
    }

    &.error {
      background: rgba(223, 0, 0, 0.05);
      border: 1px solid rgba(223, 0, 0, 0.4);
    }

    & + .van-radio {
      margin-top: 15px;
    }

    :deep(.van-radio__icon) {
      width: 20px;
      height: 20px;
      display: inline-block;

      .van-icon {
        line-height: 20px;
        width: 20px;
        height: 20px;
      }
    }

    :deep(.van-radio__label) {
      font-size: 16px;
      color: #333;
      margin-left: 10px;
    }
  }
}

.van-checkbox-group {
  .van-checkbox {
    background: #FAFAFA;
    border-radius: 4px;
    border: 1px solid #EEEEEE;
    padding: 15px 15px;
    line-height: 18px;
    display: block;

    &[aria-checked=true] {
      background: var(--colorbg);
      border: 1px solid var(--color);
    }

    &.right {
      background: var(--colorbg);
      border: 1px solid var(--color);
    }

    &.error {
      background: rgba(223, 0, 0, 0.05);
      border: 1px solid rgba(223, 0, 0, 0.4);
    }

    & + .van-checkbox {
      margin-top: 15px;
    }

    :deep(.van-checkbox__icon) {
      width: 20px;
      height: 20px;
      display: inline-block;

      .van-icon {
        line-height: 20px;
        width: 20px;
        height: 20px;
      }
    }

    :deep(.van-checkbox__label) {
      font-size: 16px;
      color: #333;
      margin-left: 10px;
    }
  }
}

.van-input {
  padding: 0;
  background: #FAFAFA;
  border: 1px solid #EEEEEE;
  border-radius: 4px;

  :deep(.van-field__label) {
    padding: 10px;
    width: 80px;
    text-align: center;
    font-size: 16px;
    color: #333333;
    background: #fff;
    border-right: 1px solid #EEEEEE;
  }

  :deep(.van-field__value) {
    padding: 10px 10px 10px 0;
  }
}

.van-textarea {
  background: #FAFAFA;
  border: 1px solid #EEEEEE;
  border-radius: 4px;
  padding: 12px 16px;

  :deep(.input-value) {
    height: auto;
    padding: 0;

    .placeholder {
      font-size: 14px;
    }
  }
}

.group-wrap {
  border-bottom: 1px solid #EEEEEE;
  padding-bottom: 25px;

  .el-input-number {
    margin: 0 6px;
  }
}

.fc-7f {
  color: #7F7F7F;
}

.test-content-item + .test-content-item {
  margin-top: 10px;
}

.underline-text {
  padding: 0 10px;
  line-height: 32px;
  border-bottom: 1px solid var(--color);
}

.underline-input {
  min-width: 100px;
  max-width: 100%;
  padding: 0 5px;
  width: fit-content;
  display: inline-block;
  vertical-align: middle;
  border-bottom: 1px solid var(--color);

  :deep(.van-field__control) {
    width: fit-content;
    height: 32px;
    line-height: 32px;
    border: none;
  }

  &.van-field__control.is-disabled :deep(.el-input__inner) {
    background-color: #fff;
  }
}

.vote-list {
  &.disabled {
    .vote-item {
      opacity: 0.8;

      &:hover {
        border: 1px solid #DDDDDD;
      }

      &.active {
        color: var(--color);
        border: 1px solid var(--color);

        &:hover {
          border: 1px solid var(--color);
        }
      }
    }
  }

  .vote-item {
    position: relative;
    z-index: 1;
    min-height: 40px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 22px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      border: 1px solid var(--color);
    }

    &:before {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 22px;
      height: 22px;
      z-index: -1;
      opacity: 0;
      transition: all 0.3s;
      background: url(../../static/image/icon-select.png) no-repeat;
      background-size: 100% 100%;
    }

    &.active {
      color: var(--color);
      border: 1px solid var(--color);

      &:before {
        z-index: 1;
        opacity: 1;
      }

      .vote-progress {
        background: var(--colorbg1);
      }
    }

    .vote-content {
      flex: 1;
      margin-right: 20px;
    }

    .vote-num {
      font-weight: 400;
    }

    .vote-progress {
      position: absolute;
      height: 100%;
      left: 0;
      top: 0;
      background: #F0F0F0;
      z-index: -1;
      transition: all 0.3s;
    }
  }

  .vote-item-wrap + .vote-item-wrap {
    margin-top: 12px;
  }
}
</style>